<template>
  <div class="wrapper">
    <div class="content">

      <text class="font32 text2 mr10 fontz mb10">{{item.pair}}</text>

      <text class="font28 text2 mr10 left-desc mb10">{{ item.indicatorName }}</text>

      <text class="font24 text3 mr10 left-desc">{{ desc }}</text>

      <div class="but-close" @click="funcClick($event)">
        <LImage class="img-genduo" :src="Config.img('v2_gengduox.png')" />
      </div>
      <text :class="['font24', 'mr10','state', stateStyle ]">{{ stateText }}</text>
    </div>
    <div class="line1 height1 mt30"></div>
  </div>
</template>


<style src="@/_css/style.css" ></style>
<style scoped>
  .wrapper {
    display: flex;
    width: 750px;
    flex-direction: column;
    margin-top: 30px;
    padding: 0 30px;
  }
  .content {
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }
  .left-desc {
    lines: 1;
    width: 530px;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .but-close {
    z-index: 9;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 0px;
    right: 15px;
    width: 52px;
    height: 52px;
  }
  .img-genduo {
    width: 32px;
    height: 32px;
  }
  .state {
    position: absolute;
    right: 15px;
    bottom: 0px;
  }
  .state-complete {
    color: #777f9b;
  }
  .state-tigger {
    color: #00ad88;
  }
  .state-tiggering {
    color: #00ad88;
  }
</style>

<script>
  import jtime from "@/_js/time";
  import jconfig from "@/_js/config";
  import jdebug from "@/_js/debug";
  import jmath from "@/_js/math";
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  export default {
    props: {
      item: {
        type: Object,
        default: undefined,
      },
    },

    data() {
      return {
        Config: jconfig,
        T: T,
        isShow: false,
        desc: "",
        stateText: "",
        stateStyle: "",
      };
    },

    created() {
      let expirationTime = jtime.getTime(this.item.expirationTime, "y-M-d H:m:s");
      let frequency =
        this.item.frequency == "once" ? T("仅一次") : T("每分钟一次");
      this.desc = `${frequency}｜${T("到期")}: ${expirationTime}`;
      if (this.item.status == "complete") {
        this.stateText = T("停止-已触发");
        this.stateStyle = "state-complete";
      } else if (this.item.status == "tigger") {
        this.stateText = T("未触发");
        this.stateStyle = "state-complete";
      } else if (this.item.status == "tiggering") {
        this.stateText = T("持续-已触发");
        this.stateStyle = "state-tiggering";
      } else if (this.item.status == "expire_stop") {
        this.stateText = T("过期停止");
        this.stateStyle = "state-complete";
      }
    },

    computed: {},

    methods: {
      //功能
      funcClick(event) {
        this.$emit("func", event);
      },
    },
    watch: {
      item: {
        handler(newVal, oldVal) {
          let expirationTime = jtime.getTime(
            this.item.expirationTime,
            "y-M-d H:m:s"
          );
          let frequency =
            this.item.frequency == "once" ? T("仅一次") : T("每分钟一次");
          this.desc = `${frequency}｜到期: ${expirationTime}`;
        },
      },
    },
  };
</script>